<template>
  <!-- 意见反馈页面 -->
  <div id="mine">
    <router-link to="/mypage"
      ><van-nav-bar title="意见反馈" left-arrow fixed class="van-nav-bar"
    /></router-link>
    <!-- 单选框 -->
    <div class="radio">
      <van-radio-group v-model="radio" direction="horizontal">
        <van-radio name="1">意见反馈</van-radio>
        <van-radio name="2">问题反馈</van-radio>
        <van-radio name="3">其他</van-radio>
      </van-radio-group>
    </div>
    <div class="textar">
      <textarea
        placeholder="请描述您的问题，最多200字"
        cols="36"
        rows="10"
        @input="descInput"
        v-model="desc"
        maxlength="200"
        autofocus="autofocus"
        wrap="soft"
      ></textarea>
      <span class="span1">{{ remnant }}/200</span>
    </div>
    <!-- 图片上传 -->
    <div class="my-img">
      <div class="my">
        <van-uploader class="publish" @click="publish" v-model="fileList" multiple :max-count="3" />
      </div>
    </div>
    <!-- 电话回访开关 -->
    <div class="phone">
      <van-cell center title="是否愿意接受电话回访">
        <template #right-icon>
          <van-switch size="24" v-model="checked" />
        </template>
      </van-cell>
    </div>
    <!-- 底部提交按钮 -->
    <van-button type="primary" block class="btn" @click="checkFrom"
      >提交</van-button
    >
  </div>
</template>
<script>
export default {
  data() {
    return {
      radio: "1",
      checked: false,
      desc: "", //用于获取输入框的文本
      remnant: 0,
      fileList: "", //用于获取图片
      fileList: [
        { url: "https://img.yzcdn.cn/vant/leaf.jpg" },
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
        { url: "https://img.yzcdn.cn/vant/leaf.jpg", isImage: true },
      ],
    };
  },
  methods: {
    descInput() {
      var txtVal = this.desc.length;
      this.remnant = 0 + txtVal;
    },
     
      publish() {
      //图片区域上传到七牛云
      this.fileList.forEach((item,i) => {   //遍历fileList
        let fl = item.file; //格式是File类型
        // console.log(fl);
        const putExtra = {};
        const config = {
          useCdnDomain: true,
          region: qiniu.region.z0, //要根据自己所在的区域进行更改，可能是z0,也可能是z1,z2
        };
        this.axios.get("/user/uploadToken").then((res) => {
          const token = res.data.token; //token值来自后端接口
          const timestamp = new Date().getTime(); //添加时间戳，保证图片名不重复
          const observable = qiniu.upload(fl,
            timestamp + fl.name,
            token,
            putExtra,
            config
          );
          let that = this;
          const observer = {
            next(res) {},
            error(err) {},
            complete(res) {    //异步任务
              // console.log(res.key);
              if (i != that.fileList.length - 1) {   //如果不是最后一张图
                that.imgStr +=
                  "http://www.zlllcy.com/" + res.key + ",";
              }
               else {  //如果是最后一张图
                  that.imgStr += "http://www.zlllcy.com/" + res.key;
                  console.log(that.imgStr);
                  //  console.log(123)
                  //   console.log(this)
                    // alert(that.$store.state.uid), 
                  //文字描述区域
                  if (!that.message.trim()) {
                    //如果未输入文字描述，则跳出函数
                    return; //函数是通过return来跳出, 循环是通过break来跳出
                  }
                  //上传时间
                  let date = new Date().toLocaleDateString(); //转为本地字符串
                  // console.log(1111);
                }
              },
            };
            const subscription = observable.subscribe(observer); // 上传开始
        });
      });
    },

    // 发送请求插入数据
    checkFrom() {
      // 发送post请求，传递参数：
      console.log(this.radio, this.desc, this.fileList, this.checked);
      this.axios
        .post(
          "/feedback",
          `type=${this.radio}&content=${this.desc}&img=${this.fileList}&call_back=${this.checked}`
        )
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.$toast("提交成功");
            this.$router.push("/mypage");
          } else if (res.data.code == 201) {
            this.$toast("提交失败");
          }
        });
    },
  },
};
</script>

<style scoped>
/* 通过外层id标识，穿透设置css */
#mine /deep/ .van-nav-bar__title,
#mine /deep/ .van-icon {
  color: white !important;
  position: relative;
}
.van-nav-bar {
  background-color: rgba(88, 133, 185, 0.87)
}
.radio {
  margin-top: 60px;
  margin-left: 30px;
  /* text-align: center; */
}
textarea {
  margin-top: 20px;
  background-color: rgb(246, 246, 244);
  border-radius: 10px;
  border: none;
}
.textar {
  text-align: center;
}
.span1 {
  margin-top: 10px;
  display: block;
  margin-left: 75%;
}
.my-img {
  margin-top: 10px;
}
.btn {
  position: absolute;
  bottom: 0;
}
.phone {
  margin-top: 20px;
}
.my {
  text-align: center;
}
</style>